$(function() {
    layui.use('form', function() { //此段代码必不可少
        var form = layui.form;
        form.render();
    });
    var $image = $('#image')
    $('#btnChooseImage').on('click', function() {

        $('#coverFile').click()
    })
    let amgs;
    // 当用户选择了新文件,则更换裁剪区域的图片
    $('#coverFile').on('change', function() {
            // 获取用户选择的文件列表(文件选择框dom对象,files)
            const fileList = this.files
            if (fileList.length <= 0) {
                return layui.layer.msg('请选择图片文件', {
                    icon: 5
                })
            }
            // 获取用户选择的文件
            // 索引为0是图片的信息,索引1是选项的length
            const file = fileList[0]
                // console.log(file);
                // URL.createObjectURL 获取文件对象在内存中的url地址
            const newImgUrl = URL.createObjectURL(file)
            $image.attr('src', newImgUrl) // 重新设置图片的路径

            // $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            //     width: 200,
            //     height: 160
            // })
            let form = new FormData()
            form.append('file', file);
            $.ajax({
                method: 'post',
                data: form,
                contentType: false,
                processData: false,
                url: 'http://121.4.102.44:8083/common/upload',
                success: function(res) {
                    amgs = res.data
                },
            })
        })
        // 上传图片
        //渲染下拉框
    initCate()

    function initCate() {
        $.ajax({
            url: 'http://121.4.102.44:8083/category/list',
            success(res) {
                // if (res.type !== 1) {
                //     return layer.msg(res.message, { icon: 5 })
                // }
                const htmlStr = template('tpl-cate', res)
                    // console.log(htmlStr);
                $('[name=cate_id]').html(htmlStr)
                layui.form.render()
            }
        })
    }
    let caid;
    layui.form.on('select(categoryId)', function(data) {
        caid = data.value
    });
    // console.log(caid);
    //添加菜品
    $('#form-add').on('submit', function(e) {
        //获取所有渲染出来口味右边框的值，截取字符串拼接起来
        e.preventDefault()
        let arr = []
        $('.item').each((e, V) => {
            console.log($(V).html().length);
            if ($(V).html().length < 11) {
                arr.push($(V).html().substring(0, 2))
            } else {
                arr.push($(V).html().substring(0, 3))
            }
        });
        // console.log(arr);
        layui.form.render()
        $.ajax({
            method: 'post',
            url: 'http://121.4.102.44:8083/dish',
            contentType: 'application/json;charset=utf-8',
            data: JSON.stringify({
                categoryId: caid,
                name: $('[name=uname]').val(),
                price: $('[name=price]').val(),
                image: amgs,
                status: '1',
                flavors: [{
                    name: $('#demo2').val(),
                    value: JSON.stringify(arr),
                    showOption: false
                }],
                code: "",
                description: $('textarea').val()
            }),
            success(res) {
                // location.href = '/index.html#/add'
                // window.location.reload();
                if (res.code !== 1) {
                    return layui.layer.msg('添加失败', res.msg)
                }
                layui.layer.msg('添加成功')
                setTimeout(function() {
                    $('.return').click();
                }, 1000)
            }
        })
    })
})